/**
 * Transitions
 * @module transitions
 * {@link http://www.w3.org/TR/css3-transitions/ Specification}
 * =====================================================================================================================
 */

// Common variables
@transition: 100ms linear;
@transition-fade: opacity @transition;
@transition-toggle: 200ms ease;

/**
 * Transition
 *
 * @example
 * .transition(background-color @transition);
 * .transition(transform @transition, @transition-fade;);
 */
.transition(@value, @prop: ~"") {
    -webkit-transition@{prop}: @value; // Chrome 25-, Safari 6-
       -moz-transition@{prop}: @value; // Firefox 15-4
         -o-transition@{prop}: @value; // Opera 11.5
            transition@{prop}: @value; // Chrome 26+, Firefox 16+, IE 10+, Safari 6.1+, Opera 12.1+
}

/**
 * Transition <Property>
 * {@link https://webref.ru/css/transition-timing-function Web Reference}
 *
 * @example
 * .transition-delay(1s);
 * .transition-duration(100ms);
 * .transition-property(width, height;);
 * .transition-timing-function(ease-in-out);
 */
.transition-delay(@value: 0s)             { .transition(@value, -delay); }
.transition-duration(@value: 0s)          { .transition(@value, -duration); }
.transition-property(@value: all)         { .transition(@value, -property); }
.transition-timing-function(@value: ease) { .transition(@value, -timing-function); }